@extends('home/common/layout')
@section('content')
    <!--banner区-->
    <div class="travel-index-imgroll">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="{{asset('home')}}/img/widget-bannerA.jpg" alt="AA">
                </div>
                <div class="item">
                    <img src="{{asset('home')}}/img/widget-bannerB.jpg" alt="">
                </div>
            </div>
            <!--<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">-->
            <!--<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
            <!--<span class="sr-only">Previous</span>-->
            <!--</a>-->
            <!--<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">-->
            <!--<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>-->
            <!--<span class="sr-only">Next</span>-->
            <!--</a>-->
        </div>
    </div>
    <div class="container">
        <!--左侧列表导航-->
        <div class="travel-index-nav">
            <div class="citylistbox">
                <div class="title text-center">全部分类课程</div>
                <div class="listbox">
                    <div class="list">
                        <dl><dt>编程入门</dt></dl>
                    </div>
                    <div class="box">编程入门编程入门编程入门编程入门编程入门编程入门编程入门编程入门编程入门</div>
                </div>
                <div class="listbox">
                    <div class="list">
                        <dl><dt>数据分析师</dt></dl>
                    </div>
                    <div class="box">机器学习工程师</div>
                </div>
                <div class="listbox">
                    <div class="list">
                        <dl>
                            <dt>机器学习工程师</dt>
                        </dl>
                    </div>
                    <div class="box">机器学习工程师</div>
                </div>
                <div class="listbox">
                    <div class="list">
                        <dl><dt>人工智能工程师</dt></dl>
                    </div>
                    <div class="box">人工智能工程师</div>
                </div>
                <div class="listbox">
                    <div class="list">
                        <dl><dt>全栈工程师</dt></dl>
                    </div>
                    <div class="box">全栈工程师</div>
                </div>
                <div class="listbox">
                    <div class="list">
                        <dl><dt> iOS工程师</dt></dl>
                    </div>
                    <div class="box">iOS工程师</div>
                </div>
                <div class="listbox">
                    <div class="list">
                        <dl><dt> VR 开发者</dt></dl>
                    </div>
                    <div class="box"> VR 开发者</div>
                </div>
                <div class="listbox">
                    <div class="list">
                        <dl><dt>商业预测分析师</dt></dl>
                    </div>
                    <div class="box">商业预测分析师</div>
                </div>
                <div class="listbox">
                    <div class="list">
                        <dl><dt> Java 工程师</dt></dl>
                    </div>
                    <div class="box"> Java 工程师</div>
                </div>
                <div class="listbox">
                    <div class="list">
                        <dl><dt> 前端开发工程师</dt></dl>
                    </div>
                    <div class="box">前端开发工程师</div>
                </div>
            </div>
        </div>
        <div class="recommend-list">
            <div class="btn-group btn-group-justified">

                @foreach($pro_info as $val)
                <a href="{{url('/',$val->pro_id)}}" class="btn btn-primary">{{$val->pro_name}}</a>
                @endforeach
            </div>
        </div>
        <div class="conten-list">
                @foreach($course_info as $val)
            <div class="conten" id="a">
                <div class="row text-center top">
                    <div class="col-lg-3 text-left" id="Title">{{$val->course_name}}</div>
                    <div class="col-lg-5 ">
                        <div class="btn-group btn-group-justified">
                            <a href="#" class="btn btn-primary active">热 门</a>
                            <a href="#" class="btn btn-primary">初 级</a>
                            <a href="#" class="btn btn-primary">中 级</a>
                            <a href="#" class="btn btn-primary">高 级</a>
                        </div>
                    </div>
                    <div class="col-lg-3 text-right"><a href="{{url('home/course/detail')}}" class="btn btn-default ck-all">查看全部</a></div>
                </div>
                <div class="container cont-list">
                    <div class="cont-list-roll">
                        <div class="next glyphicon glyphicon-chevron-right"></div>
                        <div class="prev glyphicon glyphicon-chevron-left"></div>
                        <div class="cont-list-box">
                            @foreach($val->lesson as $v)
                                @if($loop->index<5)
                            <li class="">
                                <img src="{{$v->cover_img}}" alt="AA">
                                <div class="tit">{{$v->lesson_desc}}</div>
                                <div>时长：{{$v->lesson_duration}}分钟</div>
                                <div>老师：{{$v->getTeacherName($v->teacher_ids)}}</div>
                            </li>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
    </div>
    <div class="index-cont-nav">
        <div id="myNavbar" class="collapse navbar-collapse ">
            <div id="myCollapse" class="collapse navbar-collapse">
                <div class="logo-ico"><img src="{{asset('home')}}/img/asset-logoIco.png" alt=""></div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#a">编程入门</a></li>
                    <li><a href="#b">数据分析师</a></li>
                    <li><a href="#c">机器学习工程师</a></li>
                    <li><a href="#d">前端开发工程师</a></li>
                    <li><a href="#e">人工智能工程师</a></li>
                    <li><a href="#f">全栈工程师</a></li>
                    <li><a href="#g">iOS工程师</a></li>
                    <li><a href="#h">VR开发者</a></li>
                    <li><a href="#i">深度学习</a></li>
                    <li><a href="#j">商业预测分析师</a></li>
                    <li><a href="#k">Android开发工程师</a></li>
                </ul>
            </div>
        </div>
    </div>

    </div>
    <div class="container">
        <div class="index-bot-video text-center">
            <div class="tit">运作方式</div>
            <div class="row">
                <div class="col-lg-6 text-left">
                    <div class="cont">
                        <p class="tit glyphicon glyphicon-hand-right"> 课程作业</p>
                        <p>每门课程都像是一本互动的教科书，具有预先录制的视频、测验和项目。</p>
                    </div>
                    <div>
                        <p class="tit glyphicon glyphicon-hand-right"> 证书</p>
                        <p>获得正式认证的作业，并与朋友、同事和家人分享您的成功。</p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <img src="{{asset('home')}}/img/widget-video.jpg" width="500" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 页面底部 -->
    <div class="gotop">
        <a href="#"><i class="glyphicon glyphicon-pencil"></i><span class="hide">问题反馈</span></a>
        <a href="#top"><i class="glyphicon glyphicon-plane"></i><span class="hide">返回顶部</span></a>
    </div>

@endsection